<template>
	<view class="pl25 pr25" style="background-color: #FFFFFF;padding-top: 60rpx;">
			<image @click="showid()" src="../../static/images/xj.png" mode="widthFix" style="width: 52rpx;position: absolute;right: 20rpx;top: 0rpx;"></image>
		<view class="pt30 pb30 bb flex flex-ac">
			<text class="text c000">真实姓名</text>
			<input class="it1" placeholder-class="c999" placeholder="请填写真实姓名" v-model="userName"  @input="fpNumInputName" maxlength="6"/>
		</view>
		<view class="pt30 pb30 bb flex flex-ac flex-pj">
			<text class="text c000">是否为儿童</text>
			<view class="flex flex-ac">
				<view class="flex flex-ac mr30">
					<image v-if="isChildren==1" class="check" src="http://tuozhen1.oss-cn-beijing.aliyuncs.com/ueditor/upload/weixin/images/checky.png"></image>
					<image @click="isChildrenState(1)"  v-else class="check" src="http://tuozhen1.oss-cn-beijing.aliyuncs.com/ueditor/upload/weixin/images/checkn.png"></image>
					<text>是</text>
				</view>
				<view class="flex flex-ac mr30">
					<image v-if="isChildren==0" class="check" src="http://tuozhen1.oss-cn-beijing.aliyuncs.com/ueditor/upload/weixin/images/checky.png"></image>
					<image @click="isChildrenState(0)"  v-else class="check" src="http://tuozhen1.oss-cn-beijing.aliyuncs.com/ueditor/upload/weixin/images/checkn.png"></image>
					<text>否</text>
				</view>
			</view>
		</view>
		<template v-if="isChildren">
			<view class="pt30 pb30 bb flex flex-ac">
				<text class="text c000">领卡人证件号码</text>
				<input class="it1" placeholder-class="c999" placeholder="必填" v-model="idNo" />
			</view>
			<view class="pt30 pb30 bb flex flex-ac">
				<text class="text c000">监护人手机号</text>
				<input class="it1" placeholder-class="c999" placeholder="请输入监护人手机号码" v-model="phone"/>
			</view>
		<!-- 	<view class="pt30 pb30 bb flex flex-ac">
				<text class="text c000">出生日期</text>
				<picker mode="date" :value="date" start="2015-09-01" end="2025-09-01" @change="bindDateChange">
					<view class="picker" v-if="date">
						{{date}}
					</view>
					<view v-else>
						<span class="c999">请选择孩子出生日期</span>
					</view>
				</picker>
			
			</view> -->
			<view class="pt30 pb30 bb flex flex-ac">
				<text class="text c000">监护人姓名</text>
				<input class="it1" placeholder-class="c999" placeholder="请输入您的姓名" v-model="jhrName" @input="fpNumInputNames" maxlength="6" />
			</view>
			<view class="pt30 pb30 bb flex flex-ac flex-pj">
				<text class="text c000">监护人与儿童的关系</text>
				<view class="flex flex-ac">
					<view class="flex flex-ac mr30">
						<image v-if="peopleState==1" class="check" src="http://tuozhen1.oss-cn-beijing.aliyuncs.com/ueditor/upload/weixin/images/checky.png"></image>
			  			<image @click="isPeople(1)"  v-else class="check" src="http://tuozhen1.oss-cn-beijing.aliyuncs.com/ueditor/upload/weixin/images/checkn.png"></image>
						<text>父</text>
					</view>
					<view class="flex flex-ac mr30">
						<image v-if="peopleState==2" class="check" src="http://tuozhen1.oss-cn-beijing.aliyuncs.com/ueditor/upload/weixin/images/checky.png"></image>
						<image @click="isPeople(2)"  v-else class="check" src="http://tuozhen1.oss-cn-beijing.aliyuncs.com/ueditor/upload/weixin/images/checkn.png"></image>
						<text>母</text>
					</view>
				</view>
			</view>
			<view class="pt30 pb30 bb flex flex-ac flex-pj">
				<text class="text c000">监护人证件类型</text>
				<text class="c74a6fd it1 ftr" @click="choseType">{{jhridNoName==null?'请选择证件类型':jhridNoName}}</text>
			</view>
			<view class="pt30 pb30 bb flex flex-ac">
				<text class="text c000">监护人证件号码</text>
				<input class="it1" placeholder-class="c999" placeholder="请输入证件号码" v-model="jhrIdNo"  />
			</view>
			<view class="pt30 pb30 bb flex flex-ac">
				<text class="text c000">健康卡密码</text>
				<input type="password" class="it1" placeholder-class="c999" placeholder="不输入默认123456" v-model="password" />
			</view>
		</template>
		<template v-else>
			<view class="pt30 pb30 bb flex flex-ac">
				<text class="text c000">联系电话</text>
				<input class="it1" placeholder-class="c999" placeholder="请输入联系电话" v-model="phone"/>
			</view>
			
			<!-- <view class="pt30 pb30 bb flex flex-ac flex-pj">
				<text class="text c000">证件类型</text>
				<text class="c74a6fd it1 ftr" @click="choseType">{{typeName==null?'请选择证件类型':typeName}}</text>
			</view> -->
			<view class="pt30 pb30 bb flex flex-ac">
				<text class="text c000">身份证号</text>
				<input class="it1" placeholder-class="c999" placeholder="请输入身份证号" v-model="idNo" @blur="isSex"/>
			</view>
			                      
			<view class="pt30 pb30 bb flex flex-ac flex-pj" v-if="isShowPregnancy">
				<text class="text c000">是否处于孕期</text>
				<view class="flex flex-ac">
					<view class="flex flex-ac mr30">
						<image v-if="isPregnancy==1" class="check" src="http://tuozhen1.oss-cn-beijing.aliyuncs.com/ueditor/upload/weixin/images/checky.png"></image>
						<image @click="isPregnancyState(1)"  v-else class="check" src="http://tuozhen1.oss-cn-beijing.aliyuncs.com/ueditor/upload/weixin/images/checkn.png"></image>
						<text>是</text>
					</view>
					<view class="flex flex-ac mr30">
						<image v-if="isPregnancy==0" class="check" src="http://tuozhen1.oss-cn-beijing.aliyuncs.com/ueditor/upload/weixin/images/checky.png"></image>
						<image @click="isPregnancyState(0)"  v-else class="check" src="http://tuozhen1.oss-cn-beijing.aliyuncs.com/ueditor/upload/weixin/images/checkn.png"></image>
						<text>否</text>
					</view>
				</view>
			</view>
			<!-- <view class="pt30 pb30 bb flex flex-ac">
				<text class="text c000">健康卡密码</text>
				<input  type="password" class="it1" placeholder-class="c999" placeholder="不输入即默认123456"  v-model="password" />
			</view> -->
		</template>
		<view class="pt30 pb30 bb flex flex-ac">
			<text class="text c000">民族</text>
			<picker class="it1" @change="bindRaceChange" :value="raceIndex" :range="raceArray" range-key="name">
				<view>{{ raceArray[raceIndex].name }}</view>
			</picker>
		</view>
		<!-- 健康卡-->
		<view class="win flex"  v-if="winState" @touchmove.stop="defaultEvent" :animation="animationData">
			<view class="it1" @click.stop="hideWin"></view>
			<scroll-view class="it1 pl30 pr30 box ftc pt120" scroll-with-animation scroll-y>
				<view v-for="(item,index) in itemListKey" :key="item.code">
					<view :class="activeIndex == item.code?'active':''" @click.stop="hideWin" @click="addorRemoveClass(item.code,item.name)">{{item.name}}</view>
				</view>
			</scroll-view>
		</view>
		<uni-popup ref="popup" type="message">
		    <uni-popup-message :type="warnType" :message=warnMessage :duration="warnTime"></uni-popup-message>
		</uni-popup>
		
<view style="width: 100%;position: fixed;bottom: 40rpx;">
			<view class="add-btn" @click="submit()">提交</view>
			<view class="pt20 pb20 flex flex-ac ft11" style="padding-left: 40rpx;margin-top: 20rpx;">
				<radio-group @click="state=!state">
				 	<radio value="1" :checked="state" color="#2A82E4"/>
				</radio-group>
				<text class="c999 ml15" style="margin-left: 0rpx;font-weight: bolder;">同意</text>
				<text class="c74a6fd ml5" @click="selectHopBook" style="color: #2A82E4;">邛崃民众门诊部患者知情同意书</text>
			</view>
		</view>	</view>
</template>

<script>
	import idCardNumberVerify from '../../utils/id.js'
	export default {
		data() {
			return {
				isShowPregnancy:false,
				isPregnancy:0,
				activeIndex:'',//是否选中
				peopleState:1,//是否监护人与儿童的关系
				date: '',//儿童出生日期
				itemListKey:[{name:'居民身份证',code:"01"},{name:'居民户口簿',code:"02"},{name:'护照',code:"03"},{name:'军官证(士兵证)',code:"04"},{name:'驾驶执照',code:"05"},{name:'港澳居民来往内地通行证',code:"06"},{name:'台湾居民来往内地通行证',code:"07"},{name:'出生医学证明',code:"08"},{name:'其他',code:"99"}],
				typeName: '居民身份证',
				jhridNoName:'居民身份证',
				userName:'',//姓名
				isChildren:0,//是否1岁以下儿童0-否 1-是
				idNoType:'01',//证件类型
				idNo:'',//证件号码
				phone:'',//电话号码
				jhrGx:'',//监护人与儿童关系（1-父；2-母）
				jhrIdNo:'',//监护人证件号码
				jhridNoType:'01',//监护人证件类型
				jhrName:'',//监护人姓名
				password:'',//电子健康卡密码(默认密码123456)
				warnMessage:'错误',//消息内容
				warnType:'warn',//消息类型  success/warn/info/error
				warnTime:1000,//消息提醒延长时间
				winState:false,
				animation:null,
				animationData:null,
				windowWidth:0,
				usrUserId:null,
				raceArray: [
					{ name: '汉族' }, 
					{ name: '壮族' }, 
					{ name: '回族' }, 
					{ name: '满族' },
					{ name: '维吾尔族' },
					{ name: '苗族' },
					{ name: '彝族' },
					{ name: '土家族' },
					{ name: '藏族' },
					{ name: '蒙古族' },
					{ name: '侗族' },
					{ name: '布依族' },
					{ name: '瑶族' },
					{ name: '白族' },
					{ name: '朝鲜族' },
					{ name: '哈尼族' },
					{ name: '黎族' },
					{ name: '哈萨克族' },
					{ name: '傣族' },
					{ name: '畲族' },
					{ name: '傈僳族' },
					{ name: '东乡族' },
					{ name: '仡佬族' },
					{ name: '拉祜族' },
					{ name: '佤族' },
					{ name: '水族' },
					{ name: '纳西族' },
					{ name: '羌族' },
					{ name: '土族' },
					{ name: '仫佬族' },
					{ name: '锡伯族' },
					{ name: '柯尔克孜族' },
					{ name: '景颇族' },
					{ name: '达斡尔族' },
					{ name: '撒拉族' },
					{ name: '布朗族' },
					{ name: '毛南族' },
					{ name: '塔吉克族' },
					{ name: '普米族' },
					{ name: '阿昌族' },
					{ name: '怒族' },
					{ name: '鄂温克族' },
					{ name: '京族' },
					{ name: '基诺族' },
					{ name: '德昂族' },
					{ name: '保安族' },
					{ name: '俄罗斯族' },
					{ name: '裕固族' },
					{ name: '乌孜别克族' },
					{ name: '门巴族' },
					{ name: '鄂伦春族' },
					{ name: '独龙族' },
					{ name: '赫哲族' },
					{ name: '高山族' },
					{ name: '珞巴族' },
					{ name: '塔塔尔族' }
				],
				raceIndex: 0,
				state:false,
				medDocInfoId:'',
				isBack:false
			};
		},
		onLoad(option) {
			this.usrUserId=option.userId
			this.medDocInfoId=option.medDocInfoId
			let _this = this;
			uni.getSystemInfo({
				success:function(res){
					_this.windowWidth = res.windowWidth
				}
			})
			//初始化一个动画
			var animation = uni.createAnimation({
				duration: 500,
				timingFunction: 'ease',
			})
			this.animation = animation;
			// 定义动画内容
			this.animation.translateX(_this.windowWidth).step()
			// 导出动画数据传递给data层
			this.animationData = this.animation.export()
		},
		onShow() {
			  if (this.isBack) {
			      this.isBack = false; 
				   console.log('姓名:', this.userName);
				        console.log('证件号:', this.idNo);
				        console.log('民族下标:', this.raceIndex);
				        console.log('是否儿童:', this.isChildren);
				  }
		},
		methods: {
			showid(){
				uni.navigateTo({
					url:'/pages5/idCard/index'
				})
			},
			selectHopBook() {
				uni.navigateTo({
					url: '/pages/agreement/index'
				})
			},
			//校验姓名 只能输入汉字
			fpNumInputName(e){
				const o = e.target;
				const inputRule = /[^\u4E00-\u9FA5]/g  //修改inputRule 的值
				this.$nextTick(function() {
					this.userName = o.value.replace(inputRule , '');
				})
			},
			//监护人姓名
			fpNumInputNames(e){
				const o = e.target;
				const inputRule = /[^\u4E00-\u9FA5]/g  //修改inputRule 的值
				this.$nextTick(function() {
					this.jhrName = o.value.replace(inputRule , '');
				})
			},
			bindRaceChange(e){
				this.raceIndex = e.detail.value;
			},
			isSex(){
				if(this.idNo.length>=17){
					let num = this.idNo.charAt(16);
					if(num%2==0){
					  this.isShowPregnancy = true
					}else{
					  this.isShowPregnancy = false
					}
				}
			},
			addorRemoveClass(code,name){
				this.activeIndex  = code;
				if(this.isChildren == 1){
					this.jhridNoType = code;
					this.jhridNoName= name;
				}else{
					this.typeName= name;
					this.idNoType = code;
				}
				console.log(code,name)
			},
			isChildrenState(value){
				this.isChildren = value;
			},
			isPregnancyState(value){
				this.isPregnancy = value;
			},
			isPeople(value){
				this.peopleState = value;
			},
			// bindDateChange: function(e) {
			// 	console.log('picker发送选择改变，携带值为', e.detail.value)
			// 	this.date = e.detail.value
			// },
			//监护人证件类型
			choseType() {
				this.winState = true;
				setTimeout(()=>{
					let animation = this.animation;
					// 定义动画内容
					animation.translateX(0).step()
					// 导出动画数据传递给data层
					this.animationData = animation.export()
				},200)
			},
			hideWin(e){
				console.log(e);
				let animation = this.animation;
				// 定义动画内容
				animation.translateX(this.windowWidth).step()
				// 导出动画数据传递给data层
				this.animationData = animation.export()
				setTimeout(()=>{
					this.winState = false;
				},500)
			},
			//提交信息
			submit(){
				var that = this;
				if(that.verification()){
					var parm = {};
					parm.hspId =1651;
					parm.isChildren = that.isChildren;
					parm.phone = that.phone;
					parm.idNo = that.idNo; //身份证
					// parm.date = that.date;
					if(that.isChildren == 1){
						// parm.birthday = that.date;
						parm.name = that.userName;  
						parm.jhrName = that.jhrName; //监护人
						parm.jhrGx = '2';
						parm.jhrIdNo = that.jhrIdNo;
						parm.jhridNoType = that.idNoType;
						parm.race = '汉族'; //民族
						parm.idNoType = '01';
						parm.usrUserId = that.usrUserId //用户id
						//孩子身份证
						var idCardMsg = idCardNumberVerify.identityIDCard(this.idNo);
						if (!idCardMsg.isPass) {
							uni.showToast({
								title: idCardMsg.errorMsg,
								icon: 'none'
							})
							return;
						}
						//监护人身份证
						var idCardMsgs = idCardNumberVerify.identityIDCard(this.jhrIdNo);
						if (!idCardMsgs.isPass) {
							uni.showToast({
								title: idCardMsg.errorMsg,
								icon: 'none'
							})
							return;
						}
						var phone = /^1[3456789]\d{9}$/;
						if (!phone.test(this.phone)) {
							uni.showToast({
								title: "手机号格式错误",
								icon: 'none'
							})
							return
						}
					}else{
						parm.idNoType = that.idNoType;
						parm.name = that.userName;
						parm.password = that.password;
						parm.usrUserId = that.usrUserId //用户id
						var idCardMsg = idCardNumberVerify.identityIDCard(this.idNo);
						if (!idCardMsg.isPass) {
							uni.showToast({
								title: idCardMsg.errorMsg,
								icon: 'none'
							})
							return;
						}
						var phone = /^1[3456789]\d{9}$/;
						if (!phone.test(this.phone)) {
							uni.showToast({
								title: "手机号格式错误",
								icon: 'none'
							})
							return
						}
					}
					if(that.password.trim() == ''){
						parm.password = '123456';
					}
					// parm.race = '汉'
					uni.showModal({
					    title: '提示',
					    content: '是否确定提交信息',
					    success: (res) =>{
					        if (res.confirm) {
								this.func.$request('userAddpersonal.tz',parm,'POST','application/x-www-form-urlencoded').then(item=>{
									if(item.data.code = '00000'){
										var healthCardNo = item.data.result.healthCardNo;
										that.warnMessage = '健康卡号申请成功';
										that.warnType = 'success';
										that.$refs.popup.open();
										//设置缓存
										// var health_key = {};
										// health_key.name = that.userName;
										// health_key.phone = that.phone;
										// health_key.idNo = that.idNo;
										// health_key.healthCardNo = healthCardNo;
										// uni.setStorage({
										//     key: 'health_key',
										//     data: JSON.stringify(health_key),
										//     success: function () {
										//         console.log('success');
										//     }
										// });
										this.personalFileAdd(healthCardNo,that.idNo,that.phone,that.userName)
									
									//     uni.navigateTo({
									//     	url: '/pages/record/index' 
									//     });
									
									// 	setTimeout(()=>{
									// 		//档案信息的跳转
									// 		uni.navigateTo({
									// 			url: '/pages/mymess/index?userId='+that.usrUserId
									// 		});
									// 	},1000)
									}else{
										that.warnMessage = item.data.errMsg;
										that.warnTime  = 3000;
										that.$refs.popup.open();
									}
								}).catch(error=>{
									that.warnMessage = '健康卡号申请失败';
									that.warnType = 'error';
									that.$refs.popup.open();
								})
					        } else if (res.cancel) {
					            
					        }
					    }
					});
				}
			},
			personalFileAdd(healthCardNo,idNo,phone,userName){
				let openid=uni.getStorageSync('openId')
				let data={
					hspId:this.hspId,
					identity:idNo,
					healthCardNo:healthCardNo,
					name:userName,
					mobile:phone,
					isPregnancy: this.isPregnancy,
					isOperation:"0",
					isAllergy:"0",
					usrUserId: this.usrUserId,
					race: this.raceArray[this.raceIndex].name
				}
				this.func.$request('personalFile/add.tz',data,"POST",'application/x-www-form-urlencoded').then(item=>{
					console.log('add====',item)
					this.warnMessage = '档案保存成功';
					this.warnType = 'success';
					this.$refs.popup.open();
					let pages = getCurrentPages();
					let prevPage = pages[pages.length-2]
					prevPage.$vm.isBack = true
					if(item&&item.data&&item.data.result){
						prevPage.$vm.personalFileId = item.data.result
					}
					//定义一个监听事件
					// uni.$emit('returnRecord', address);
					uni.navigateTo({
						url: '/pages/record/index?medDocInfoId='+this.medDocInfoId 
					});
				})
			},
			//数据验证
			verification(){
				if(!this.userName){
					this.warnMessage = '姓名不能为空';
					this.$refs.popup.open();
					return false;
				}
				if(!this.phone){
					this.warnMessage = '手机号不能为空';
									this.$refs.popup.open();
					return false;
				}
				if(!this.idNoType){
					this.warnMessage = '证件类型不能为空';
					this.$refs.popup.open();
					return false;
				}
		
				if(this.isChildren == 0){
					if(!this.idNo){
						this.warnMessage = '证件号码不能为空';
						this.$refs.popup.open();
						return false;
					}				
				}else{
					// if(!this.date){
					// 	this.warnMessage = '出生日期不能为空';
					// 	this.$refs.popup.open();
					// 	return false;
					// }
					if(!this.jhrName){
						this.warnMessage = '监护人姓名不能为空';
						this.$refs.popup.open();
						return false;
					}
					if(!this.jhrIdNo){
						this.warnMessage = '监护人证件号码不能为空';
						this.$refs.popup.open();
						return false;
					}
					
				}
				if(!this.state){
					this.warnMessage = '请仔细阅读邛崃民众门诊部患者知情同意书并勾选';
					this.$refs.popup.open();
					return false;
				}
				
				return true;
			}
		}
	};
</script>

<style lang="less">
	.check {
		width: 28rpx;
		height: 28rpx;
		margin-right: 15rpx;
	}

	.text {
		display: inline-block;
		width: 290rpx;
	}
	.bottomBtn {
		margin-top: 30rpx;
		position: relative;
		height: 125rpx;
		width: 100%;
	
		.bottomBtncon {
			position: fixed;
			width: 700rpx;
			z-index: 10;
			left: 25rpx;
			height: 125rpx;
			bottom: 0;
			background: #FFFFFF;
	
			.btns {
				width: 660rpx;
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 10rpx;
				background: #74a6fd;
			}
		}
	}
	
	.win {
		.pt120{
			// padding-top: 120rpx;
		}
		position: fixed;
		width: 100%;
		height: 100vh;
		left: 0;
		top: 0;
		z-index: 20;
		background: rgba(0,0,0,0.3);
		scroll-view{
			height: 100vh;
			background: #fff;
			view{
				height: 90rpx;
				line-height: 90rpx;
				border-bottom: 1rpx solid #EFEFEF;
				position: relative;
			}
			view.active::after{
				position: absolute;
				content: '';
				width: 65rpx;
				height: 10rpx;
				background: #74a6fd;
				left: 50%;
				margin-left: -32rpx;
				top: 65%;
			}
		}
	}
	.add-btn {
			margin: 0rpx;
			height: 88rpx;
			line-height: 88rpx;
			width: 90%;
			background: #BE965B;
			border-radius: 44rpx;
			color: #FFFFFF;
			text-align: center;
		}

</style>
